<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    引入vue的js-->
    <script type="text/javascript" src="js/vue.js"></script>
<!--    引入anxios的js-->
    <script type="text/javascript" src="js/axios.min.js"></script>
<!--    引入elementui的js 前必须引入vue的js-->
    <script type="text/javascript" src="js/index.js"></script>
<!--    引入elementui的css样式-->
    <link  type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="aaa">

    <el-form :inline="true" :model="studentSearchForm" class="demo-form-inline">
        <el-form-item label="学生姓名">
            <el-input v-model="studentSearchForm.sname" placeholder="学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
            <el-input v-model="studentSearchForm.age" placeholder="学生年龄"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="initTable">搜索</el-button>
        </el-form-item>
    </el-form>
<!--    :data 引入vue中的变量tableData必须为数组类型-->
    <el-table
            :data="tableData"
            style="width: 100%"
           >
<!--     el-table-column  表格中的列  prop: 表示表中的列的属性名  tableData中的属性名   -->
        <el-table-column
                prop="sid"
                label="学生"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sname"
                label="学生姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄"
                width="100">
        </el-table-column>
        <el-table-column
                prop="ccid"
                label="班级id"
                width="100">
        </el-table-column>
        <el-table-column
                prop="aclass.cname"
                label="班级名称"
                width="100">
        </el-table-column>
        <el-table-column
                algin="center"
                fixed="right"
                label="操作">
            <template slot-scope="scope">
                <el-button type="success" icon="el-icon-edit" size="medium" round @click="edit(scope.row)">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" size="medium" round @click="del(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
<!--    //修改学生信息对话框-->
    <el-dialog
            title="修改学生信息"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">

        <el-form ref="form" :model="editStudentForm" label-width="80px" >
            <el-form-item label="学生id">
                <el-input v-model="editStudentForm.sid"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="editStudentForm.sname"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="editStudentForm.age"></el-input>
            </el-form-item>

            <el-form-item label="班级id">
               <!-- <el-input v-model="editStudentForm.ccid">
                </el-input>-->
                <el-select v-model="editStudentForm.ccid" placeholder="请选择">
                    <el-option>
                    </el-option>
                </el-select>
            </el-form-item>

        </el-form>

    <el-button type="primary" @click="dialogVisible = false" round>确认修改</el-button>
        <el-button @click="dialogVisible = false" round>取消</el-button>
  </span>
    </el-dialog>
</div>
</body>
<script>
    var app = new Vue({
        el:"#aaa",
        data:{
            //编辑对话框的显示与隐藏  true为显示 false为隐藏
            dialogVisible:false,
            tableData: [],
            //搜索表单对象
            studentSearchForm:{},
            //编辑表单对象
            editStudentForm:[],
            currentPage:1,
            pageSize:5,
            total:0
        },
        //页面加载完之后执行此方法
        created(){
            this.initTable();
        },
        methods:{
            initTable(){
                axios.post("http://localhost:8080/student/get/"+this.currentPage+"/"+this.pageSize,this.studentSearchForm).then(result=>{
                    this.tableData=result.data.data.records;
                    this.total=result.data.data.total;
                   // console.log(this.tableData)
            })
            },
            //删除员工信息
            del(row){
                var sid = row.sid;
                console.log(sid)
                axios.delete("http://localhost:8080/student/delete/"+sid).then(result=>{
                    if(result.data.code==200){
                        this.$message.success("删除成功")//弹出成功消息
                        this.initTable();//重新加载数据
                    }
                })
            },
            //改变每页的条数时触发
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable()
                //console.log(`每页 ${val} 条`);
            },
            //改变当前页码时触发
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
                //console.log(`当前页: ${val}`);
            },
            //编辑员工信息
            edit(row){
                this.dialogVisible=true;
                this.editStudentForm=row;
            }
        }
    })
</script>
</html>